<template>
	<view class="u-page">
		<view class="report-header">用户掌握率报告</view>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in Data" :key="index">
					<view class="u-cell-content">
						<view class="item-detail"> 分类: {{item.CategoryName}}</view>
						<view class="item-detail"> 分类数量:{{item.TotalQuestions}}  </view>
						<view class="item-detail"> 掌握数: {{item.Mastered}}</view>
						<view class="item-detail"> 掌握率: {{item.MasteryRate}} </view>
					</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import {
		brushReport,
	} from '@/utils/api/report.js'

	export default {
		data() {
			return {
				Data: []
			}
		},
		onLoad() {
			this.brushReports()
		},
		methods: {
			scrolltolower() {
				this.brushReports()
			},
			brushReports() {
				brushReport().then(res => {
					if (res.data.code !== 0) {
						return
					}
					this.Data = res.data.data;
				});
			}
		},
	}
</script>

<style>
.u-page {
  background-color: #f5f5f5; /* 背景色，给页面带来清新的感觉 */
  padding: 20px; /* 增加内边距，避免内容紧贴边缘 */
  font-family: Arial, sans-serif; /* 设置字体 */
}

.report-header {
  text-align: center; /* 居中对齐 */
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 加粗字体 */
  color: #007aff; /* 字体颜色 */
  margin-bottom: 20px; /* 底部间距 */
}

.u-list {
  background-color: #ffffff; /* 列表背景色，增加对比度 */
  border-radius: 8px; /* 圆角边框，增加柔和感 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果，增加层次感 */
  overflow: hidden; /* 防止内容溢出圆角 */
}

.u-list-item {
  border-bottom: 1px solid #e0e0e0; /* 列表项底部边框，分隔不同项 */
}

.u-list-item:last-child {
  border-bottom: none; /* 最后一项不显示底部边框 */
}

.u-cell-content {
  padding: 16px; /* 增加内边距，使内容不紧贴边缘 */
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e0e0e0; /* 每项的底部边框 */
  background-color: #ffffff; /* 每项的背景色 */
}

.item-detail {
  font-size: 16px; /* 保持字体大小 */
  color: #333333; /* 字体颜色 */
  margin-bottom: 10px; /* 增加项与项之间的间距 */
}

.item-detail:last-child {
  margin-bottom: 0; /* 最后一项没有底部间距 */
}

.item-detail:first-child {
  font-weight: bold; /* 题目加粗显示 */
  color: #007aff; /* 题目颜色 */
}
</style>
